<!-- z-paging自定义的下拉刷新view -->
<template>
	<view class="refresher-container">
		<!-- 这里的图片请换成自己项目的图片 -->
		<image :class="status == 2 ? 'animation' : ''" class="refresher-image" mode="aspectFit" src="@/static/logo.png"></image>
		<text class="refresher-text">{{ statusText }}</text>
	</view>
</template>

<script setup>
import { computed } from 'vue';
let props = defineProps({
	status: {
		type: Number,
		default: () => {
			return 0;
		}
	}
});
const statusText = computed(() => {
	// 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
	// 获取到当前语言之后，就可以自定义不同语言下的展示内容了
	const statusTextArr = ['下拉刷新！', '松手刷新~', '正在努力刷新中...', '刷新成功啦~'];
	return statusTextArr[props.status];
});
</script>

<style scoped lang="scss">
.refresher-container {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	height: 150rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 20rpx;

	.refresher-image {
		margin-top: 10rpx;
		height: 45px;
		width: 45px;
		margin-bottom: 20rpx;
	}
	.animation {
		-webkit-animation: bounce-up 1s linear infinite;
		animation: bounce-up 1s linear infinite;
	}

	.refresher-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #666666;
	}
	@keyframes bounce-up {
		25% {
			transform: translateY(10px);
		}
		50%,
		100% {
			transform: translateY(0);
		}
		75% {
			transform: translateY(-10px);
		}
	}
}
</style>
